<template>
  <view class="mine-container">   
    <!-- Profile Section -->
    <view class="profile-section">
      <view class="profile-header">
        <view class="avatar-container">
          <image class="avatar" :src="userInfo.avatar || '/static/images/avatar-default.png'" />
        </view>
        <view class="profile-info">
          <view class="username">{{userInfo.nickname || 'syuyi1994'}}</view>
          <view class="badges">
            <view class="badge badge-level">
              <text>JY.3</text>
            </view>
            <view class="badge badge-count">
              <text>0 微章</text>
            </view>
          </view>
        </view>
        <view class="profile-actions">
          <button class="profile-btn icon-btn" @click="handleMore">...</button>        
        </view>
      </view>
      
      <view class="stats-bar">
        <view class="stat-item">
          <view class="stat-num">66</view>
          <view class="stat-label">点赞</view>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <view class="stat-num">13</view>
          <view class="stat-label">收藏</view>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <view class="stat-num">11</view>
          <view class="stat-label">关注</view>
        </view>
      </view>
    </view>
    
    <!-- VIP Banner -->
    <view class="vip-banner">
      <view class="vip-text">
        <text class="vip-icon">↓</text>
        <text>年度会员限时五折 领小册周边福利</text>
      </view>
      <view class="vip-button">了解一下</view>
    </view>
    
    <!-- Feature Grid -->
    <view class="feature-grid">
      <view class="feature-item">
        <view class="feature-icon-wrapper">
          <image class="feature-icon" src="/static/images/checkin.png" />
        </view>
        <text class="feature-text">每日签到</text>
      </view>
      <view class="feature-item">
        <view class="feature-icon-wrapper">
          <image class="feature-icon" src="/static/images/lucky.png" />
        </view>
        <text class="feature-text">幸运转盘</text>
      </view>
      <view class="feature-item">
        <view class="feature-icon-wrapper">
          <image class="feature-icon" src="/static/images/bug.png" />
        </view>
        <text class="feature-text">Bug挑战赛</text>
      </view>
      <view class="feature-item">
        <view class="feature-icon-wrapper">
          <image class="feature-icon" src="/static/images/rewards.png" />
        </view>
        <text class="feature-text">福利兑换</text>
      </view>
    </view>
    
    <!-- Creator Center -->
    <view class="section creator-center">
      <view class="section-header">
        <text class="section-title">创作者中心</text>
        <text class="section-link">进入首页 ></text>
      </view>
      <view class="creator-grid">
        <view class="creator-item">
          <image class="creator-icon" src="/static/images/content-data.png" />
          <text class="creator-text">内容数据</text>
        </view>
        <view class="creator-item">
          <image class="creator-icon" src="/static/images/follower-data.png" />
          <text class="creator-text">关注者数据</text>
        </view>
        <view class="creator-item">
          <image class="creator-icon" src="/static/images/activities.png" />
          <text class="creator-text">创作活动</text>
        </view>
        <view class="creator-item">
          <image class="creator-icon" src="/static/images/drafts.png" />
          <text class="creator-text">草稿箱</text>
        </view>
      </view>
      
      <view class="activity-banner">
        <text class="activity-tag">活动</text>
        <text class="activity-text">掘金 x Trae「超级体验官」创新实践征文</text>
        <text class="activity-arrow">></text>
      </view>
    </view>
    
    <!-- Common Functions -->
    <view class="section common-functions">
      <view class="section-header">
        <text class="section-title">常用功能</text>
      </view>
      <view class="function-grid">
        <view class="function-item">
          <image class="function-icon" src="/static/images/course.png" />
          <text class="function-text">课程中心</text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="/static/images/promotion.png" />
          <text class="function-text">推广中心</text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="/static/images/circle.png" />
          <text class="function-text">我的圈子</text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="/static/images/reading.png" />
          <text class="function-text">阅读记录</text>
        </view>
        
        <view class="function-item">
          <image class="function-icon" src="/static/images/registration.png" />
          <text class="function-text">我的报名</text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="/static/images/wallet.png" />
          <text class="function-text">我的钱包</text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="/static/images/tags.png" />
          <text class="function-text">标签管理</text>
        </view>
        <view class="function-item">
          <image class="function-icon" src="/static/images/feedback.png" />
          <text class="function-text">意见反馈</text>
        </view>
      </view>
    </view>
  
  </view>
</template>

<script>
import { getUserInfo } from '@/api/api.js';

export default {
  name: 'MinePage',
  data() {
    return {
      userInfo: {
        nickname: '',
        avatar: '',
      }
    }
  },
  onShow() {
    // 从缓存获取用户信息
    this.getUserInfoFromCache();
  },
  methods: {
    // 从缓存获取用户信息
    getUserInfoFromCache() {
      const cachedUserInfo = uni.getStorageSync('userInfo');
      console.log(cachedUserInfo);
      if (cachedUserInfo) {
        this.userInfo = cachedUserInfo;
        console.log(this.userInfo.nickname);
      } else {
        // 如果缓存中没有，尝试从API获取
        this.fetchUserInfo();
      }
    },
    // 从API获取用户信息
    fetchUserInfo() {
      getUserInfo().then(res => {
        uni.setStorageSync('userInfo', res);
        this.userInfo = res;
      }).catch(err => {
        console.error('获取用户信息失败:', err);
      });
    },
    // Component methods
    handleMore() {
      uni.navigateTo({
        url: '/pages/mine/info'
      });
    }
  }
}
</script>

<style scoped>
.mine-container {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 100rpx;
}

/* Profile Section */
.profile-section {
  background-color: #fff;
  padding: 20rpx 30rpx 30rpx;
  position: relative;
}

.profile-header {
  display: flex;
  align-items: center;
  padding-bottom: 30rpx;
}

.avatar-container {
  display: flex;
  justify-content: center;
  margin-right: 20rpx;
}

.avatar {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.profile-info {
  flex: 1;
}

.username {
  font-size: 34rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
  color: #333;
}

.badges {
  display: flex;
  align-items: center;
}

.badge {
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  font-size: 22rpx;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-level {
  background-color: #e8e0ff;
  color: #6440c4;
}

.badge-count {
  background-color: #f6f6f6;
  color: #666;
}

.profile-actions {
  display: flex;
  align-items: center;
}

.profile-btn {
  background: none;
  font-size: 28rpx;
  color: #888;
  border: none;
  padding: 0;
  margin-left: 8rpx;
  line-height: 1.5;
}

.icon-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-image {
  width: 40rpx;
  height: 40rpx;
}

.profile-btn::after {
  border: none;
}

.stats-bar {
  display: flex;
  align-items: center;
  padding: 0;
  background-color: #fff;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
}

.stat-divider {
  width: 1rpx;
  height: 30rpx;
  background-color: #eee;
}

.stat-num {
  font-size: 36rpx;
  font-weight: 500;
  margin-bottom: 6rpx;
  color: #333;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}

/* VIP Banner */
.vip-banner {
  background-color: #5236a9;
  color: #fff;
  padding: 18rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vip-text {
  display: flex;
  align-items: center;
  font-size: 24rpx;
}

.vip-icon {
  color: #ffd161;
  margin-right: 8rpx;
  font-weight: bold;
}

.vip-button {
  background-color: #6747c6;
  color: #fff;
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
  font-size: 22rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
}

/* Feature Grid */
.feature-grid {
  background-color: #fff;
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.feature-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon-wrapper {
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon {
  width: 50rpx;
  height: 50rpx;
}

.feature-text {
  font-size: 24rpx;
  color: #333;
}

/* Section Common */
.section {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 30rpx 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.section-link {
  color: #999;
  font-size: 26rpx;
}

/* Creator Center */
.creator-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}

.creator-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.creator-icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 10rpx;
}

.creator-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.activity-banner {
  background-color: #f8f8f8;
  padding: 20rpx;
  display: flex;
  align-items: center;
  border-radius: 6rpx;
}

.activity-tag {
  color: #f56c6c;
  margin-right: 15rpx;
  font-size: 24rpx;
  background-color: #fef0f0;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
}

.activity-text {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

.activity-arrow {
  color: #ccc;
  font-size: 24rpx;
}

/* Common Functions */
.function-grid {
  display: flex;
  flex-wrap: wrap;
}

.function-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.function-icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 10rpx;
}

.function-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

/* Tab Bar */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 6rpx;
}

.tab-text {
  font-size: 22rpx;
  color: #666;
}

.tab-active .tab-text {
  color: #3e80f7;
}

.tab-text-active {
  color: #3e80f7;
}
</style>
